<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style type="text/css">

			.mui-table-view:after,.mui-table-view-cell:after{
				background-color: inherit;				
			}
			form .mui-table-view-cell:after {
				height: 0;
				left: 0;
			}
			
			.mui-btn-block {
				font-weight: bold;
			}
						
			.boxAmount{
				border-bottom: 1px solid #eee;
			}
			.boxAmount span{
				position: absolute;
				top:15px;
				left:10px;
				font-size: 30px;
			}
			.boxAmount input{
				margin-left: 30px;
				margin-bottom: 5px;
				width: 80%;
				border-width: 0;
				font-size: 50px;
				padding: 0;
				height: 50px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<button type="button" id="list" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">记录</button>
			<h1 class="mui-title">充值</h1>
		</header>
		<div class="mui-content">
			<div class="mui-text-center mui-table-view mui-grid-view margin-bottom-no">
				<div class="mui-table-view-cell mui-col-xs-12">
					<div class="mui-h5">我的零钱</div>
					<div class="mui-h3 pt-5">￥<span id="Balance" class="mui-h2">0.00</span></div>
				</div>
			</div>
			<div class="mui-table-view mui-panel nohover" style="padding: 20px 0;">
				<div class="mui-table-view-cell">
					充值金额
				</div>
				<div class="mui-table-view-cell ">
					<div class="boxAmount">
						<span>￥</span>
						<input type="number" id="Amount" />
					</div>
				</div>
			</div>
			<div class="mui-content-padded">
				<button id="btnSubmit" type="button" class="mui-btn mui-btn-danger mui-btn-block">立即充值</button>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/resources.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			
			var $btnSubmit = document.getElementById("btnSubmit");
			var $amount = document.getElementById("Amount");
			var lastValue;
			var $wvPayResult;
			
			$id("list").addEventListener('tap', function () {
				mui.openWindow("account-in-list.html", "account-in-list.html");
			})

			$btnSubmit.addEventListener('tap', function() {
				lastValue = parseFloat($amount.value);
				
				if(isNaN(lastValue) || lastValue == 0){
					mui.toast("请输入充值金额");
					setTimeout(function(){ $amount.focus();}, 500);
					return;
				}
				
				lastValue = (lastValue*1).toFixed(2);
				
				mui.showLoading();
				app.post("AddRecharge", {Amount:lastValue}, function (data) { 
					if(data.isSuccess){
						mui.openWindow("checkout.html?Amount={0}&ID={1}&TradeType={2}".format(lastValue, data.data.RechargeID, resources.PayTradeType.Recharge), "checkout.html");
					}
					else{
						mui.alert(data.message);
					}
				})
			}) 

			buildData = function() {
				console.log("buildData");
				
				app.getAssetData(function(data){
					document.getElementById("Balance").innerText = data.Balance.toFixed(2);
				});				
				
				$amount.value = "";
				$amount.focus();
			}

			init = function() {
				buildData();
			}
			
			mui.plusReady(function () {
				init();
				
			})
		</script>
	</body>

</html>